<!--
 * @Description:
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:15:52
-->
<template>

  <div style="width: 96%; height: 90%;padding-left: 10px;">
    <div id="bottomLeft"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      charts:null,
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      this.charts.resize();
    });
  },
  beforeDestroy() {
    if (!this.charts) {
      return
    }
    /* 释放图表实例 */
    this.charts.dispose()
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.charts = null
  },

  methods: {
    //调用
    mounted(){
      this.$nextTick(function() {
        this.init();
      })
    },
    init() {
      this.charts = echarts.init(this.$el);
      this.charts.setOption({
        title: {
          // text: "各环节订单积压",
          // left: "left",
          // textStyle: {
          //   color: "#cdddf7",
          //   fontSize: "14px",
          // },
          subtext:'单位: 件',
          subtextStyle:{
            color: "#cdddf7",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        // legend: {
        //   right:20,
        //   textStyle:{
        //     color: "#cdddf7",
        //   },
        // },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#cdddf7",
            },
          },
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
          axisLine: {
            lineStyle: {
              color: "#cdddf7",
            },
          },
        },
        series: [
          {
            name: '单数',
            type: 'bar',
            data: [193, 234, 310, 121, 134, 681],
            label: {
              show: true, // 开启显示
              position: "insideRight", // 在上方显示
              verticalAlign: "middle",
              textStyle: {
                // 数值样式
                color: "white",
                fontSize: 12,
                fontWeight: "bold",
              },
            },
          }
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
